<template>
	<view class="content">
		<!-- <uni-popup :show="type === 'quxiao'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">确定取消此订单吗？</text>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="togglePopup('')" style="border-right: 1px solid #eee;">取消</text>
					<text class="uni-tip-button" @click="confirmOrder()">确定</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup :show="type === 'shouhuo'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">确定收货吗？</text>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="togglePopup('')" style="border-right: 1px solid #eee;">取消</text>
					<text class="uni-tip-button" @click="confirmCollect()">确定</text>
				</view>
			</view>
		</uni-popup> -->
		<view class="pageHeader">
			退货/退款
			<navigator class="generalBack" url="../tab/my" open-type="switchTab" hover-class="none">
				<image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			</navigator>
		</view>
		<view class="regoodbox">
			<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData('page')">
			<view v-if="fundlist.length==0" class="empty">
				<image src="/static/empty.png" mode="widthFix"></image>
				<view class="empty-tips">
					暂无记录~
				</view>
			</view>	
			<view v-for="(item,index) in fundlist" v-else :key="index" class="order-item" @click="fundDetail(item)">
				<view style="padding: 24upx;border-bottom:2upx solid #eee;display: flex;justify-content: space-between;">
					<text class="time" style="color:#333 ;">{{item.order_no}}</text>
					<text class="state" style="color:#EC6104" >{{item.type_text}}</text>
				</view>
				<view style="border-bottom:2upx solid #eee;padding:20upx 24upx;color: #666;">
					<view class="goods-box-single"
					 style="position: relative;">
						<image class="goods-img" :src="item.order_data.items.images" style="width: 146upx;height: 146upx;"></image>
						<view style="display: flex;flex-direction: column;justify-content: space-between;width: 310upx;">
							<view class="goods-info">
								{{item.order_data.items.title}}
							</view>
						</view>
						<view style="text-align: right;display: flex;flex-direction: column;justify-content: space-between;">
							<view>
								<view>{{item.order_data.payment_id=='6'?item.order_data.items.integral/item.order_data.items.buy_number+'VS':'￥'+item.order_data.items.price}}</view>
								<view style="font-size: 24upx;color: #666;margin-top: ;">x{{item.order_data.items.buy_number}}</view>
							</view>
						</view>
						<!--0待确认 1待退货 2待审核 3已完成   4已拒绝 5已取消-->
						<!-- <view class="colortxt" :style="{color:(item.status==0?'#EC6104':'#666')}"> -->
						<view class="colortxt" v-if="item.status==0||item.status==1||item.status==2" style="color: #EC6104;">
							{{item.status_text}}
						</view>
						<view class="colortxt" v-if="item.status==3" style="color: #1D84E8;">
							已退款:￥{{item.price}}
						</view>
						<view class="colortxt" v-if="item.status==4||item.status==5" style="color: #666;">
							{{item.status_text}}
						</view>
					</view>
					
				</view>
				<view class="btm-operate" style="display: flex;justify-content: flex-end;padding: 20upx 0;">
					<view style="padding-right: 32upx;">
						<button  class="default-opbtn" style="color: #666666;border:2upx solid #ddd;border-radius: 6upx;margin-left: 30upx;" @click.stop="fundDetail(item)">查看详情</button>
					</view>
				</view>
			</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import postAjax from '../../API/postAjax.js'
	import * as util from '../../common/util.js'
	import uniLoadMore from '@/components/uni-load-more.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				userToken:'',
				// 加载的属性
				loadingType:'loading',
				type:'',
				page_total:'',
				pageindex:1,
				current:'',
				fundlist:[]
				// 是否有数据
			}
		},
			
		components:{
			uniLoadMore,
			uniPopup
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.loadData()
			
		},
		methods: {
			togglePopup(type) {
				this.type = type;
			},
			
			//跳转到退款详情页
			fundDetail(item){
				uni.navigateTo({
					url:'fundetail?order='+JSON.stringify(item) 
				})
			},
			// 删除记录
			deleteRecord(item){
				
			},
			//获取订单列表
			loadData(source){
				let that = this
				
				let postdata = {
					token:that.userToken,
					page:that.pageindex,
				}
				// 我的订单列表
				that.loadingType='loading'
				let myorderList = []
				// 获取的订单数据
				postAjax('Orderaftersale/Index',postdata,function(data){
					console.log(data.data)
					if(data.code==0){
						myorderList = data.data.data
						if(myorderList.length>0){
							setTimeout(()=>{
								myorderList.forEach(item=>{
									that.fundlist.push(item);
								})
								if (myorderList.length > 4) {
									that.loadingType = 'more';
								
								} else {
									that.loadingType = 'nodata';
									// that.pageindex--
								}
								that.pageindex++
							}, 500);	
						}else {
							that.loadingType = 'noMore';
						}
						if(myorderList.length==0){
							that.loadingType = 'nodata';
						}
					}else{
						that.loadData(source)
					}
				})
				
			}
		}
	}
</script>

<style>
	
	.content {
		height: 100vh;
		background-color: #F9F9F9;
	}
	.list-scroll-content{
		height: 100%;
	}
	.goods-box-single{
		display: flex;justify-content: space-between;
	}
	.colortxt{position: absolute;width: 100%;bottom:0;left:0;text-align: right;}
	.default-opbtn{width:180upx;height: 60upx;line-height:54upx;text-align: center;font-size:30upx ;background: none;display: inline-block;}
	.tuibtn{height: 60upx;line-height:54upx;text-align: left;font-size:28upx ;background: none;display: inline-block;padding:0 16upx;}
	.default-opbtn::after,.tuibtn::after{border: none;}
	.goods-totalmsg{padding:18upx 32upx 26upx 32upx;display: flex;justify-content: space-between;color: #666;font-size: 26upx;}
	.goods-info{overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2;}
	.order-item{
		display: flex;
		flex-direction: column;
		margin: 20upx;
		overflow-y: auto;
		background-color: #fff;
		border-radius: 20upx;
		font-size: 28upx;
		color: #333;
		border-radius: 30upx;
	}
	
	.pageHeader {
		position: relative;
		height:64px;
		background-color: #1D84E8;
		line-height: 64px;
		text-align: center;
		font-size: 36upx;
		color: #fff;
		padding-top:20px;
		z-index: 10;
	}

	.generalBack {
		position: absolute;
		top: 40upx;
		left: 30upx
	}

	.regoodbox {
		padding: 22upx 30upx;
	}

	
	.uni-tip {
			/* #ifndef APP-NVUE */
			display: flex;
			flex-direction: column;
			/* #endif */
			padding: 15px 0;
			width: 300px;
			background-color: #fff;
			border-radius: 10px;
		}
		.uni-tip-title {
			margin-bottom: 10px;
			text-align: center;
			font-weight: bold;
			font-size: 16px;
			color: #333;
		}
		.uni-tip-content {
			padding:20px 0;
			text-align: center;
			font-size: 16px;
			color: #666;
		}
		.uni-tip-group-button {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			padding-top:15px;
			border-top:1px solid #eee
		}
		.uni-tip-button {
			flex: 1;
			text-align: center;
			font-size: 14px;
			color: #3b4144;
		}
		.empty {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100vh;
			padding-bottom: 100upx;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			background: #fff;
		
		}
		
		.empty image {
			width: 240upx;
			margin-bottom: 30upx;
		}
		
		.empty-tips {
			display: flex;
			font-size: 30upx;
			color: #666;
		
		}
</style>
